<template>
  <div>
    <!-- {{ data }} -->
    <li>
        <div v-if="data.id>0" @click="dian(data.id)" :class="pid==data.id?'active':''" :id='data.id'>{{data.name}}</div>
        <ul v-if="data.son && data.son.length>0">
            <reply v-for="i in data.son" :data="i"/>
        </ul>
    </li>
  </div>
</template>

<script>
export default {
    data() {
        return {
            pid:0
        }
    },
  name: "reply",
  props: ["data"],
  methods: {
      dian(pid){
          //修改父ID
          this.pid = pid
          //把所有的颜色改到没有颜色
          let colorlist = document.getElementsByClassName('active')
          for (var i=0;i<colorlist.length;i++){
              colorlist[i].classList.remove('active')
          }
          //把当前选中的修改颜色
          let prediv = document.getElementById(pid)
          prediv.classList.add('active')
          //存选中Id
          localStorage.setItem('pid',pid)
      }
  },
};
</script>

<style scoped>
.active{
    background-color: aqua;
}
</style>